<!-- 色彩状态 -->
<template>
  <div class="state-container">
    <div class="item">
        <div class="it NotTime"></div>
        <p class="it text">未按时打卡</p>
    </div>
    <div class="item">
        <div class="it OnTime"></div>
        <p class="it text">按时打卡</p>
    </div>
    <div class="item">
        <div class="it NotClocked"></div>
        <p class="it text">未打卡</p>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
@import "@/styles/var.less";
@import "@/styles/mixin.less";

.state-container{
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 0.8em;
    align-items: center;
    .item{
        display: flex;
        align-items: center;
        margin: 0 10px;
        .it{
            margin: 0 5px;
        }
    }
}

.NotTime {
  .self-state(@danger);
}
.OnTime {
  display: block;
  .self-state(@success);
}
.NotClocked {
  .self-state(@Info);
}
</style>